<template>
	<view>
		<view class="details-top u-flex">
			<view class="de-top-icon">
				<image src="../../../static/icon/power.png" mode="widthFix"></image>
			</view>
			<view class="de-top-con">
				<view class="de-top-name">
					{{ name }}
				</view>
				<view class="de-top-status">
					状态：{{ status }}
				</view>
			</view>
			<view class="de-top-active">
				<!-- 详细参数 <u-icon name="arrow-right"></u-icon> -->
			</view>
		</view>

		<view class="details-item">
			<view class="item-title">
				运行参数
			</view>
			<view class="de-item-list ">
				<view>
					<u-row>
						<u-col span="3" v-for="(item,index) in config_cs" :key="index" v-if="3>=index > 0">
							<view class="de-item">
								<view class="item-val">
									{{ item.val }} <text class="tag-unit">{{ item.company }}</text>
								</view>
								<view class="item-name">
									{{ item.name }}
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
				
				<view style="margin-top: 30rpx;">
					<u-row>
						<u-col span="3" v-for="(item,index) in config_cs" :key="index" v-if="index > 3" >
							<view class="de-item">
								<view class="item-val">
									{{ item.val }} <text class="tag-unit">{{ item.company }}</text>
								</view>
								<view class="item-name">
									{{ item.name }}
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			
			</view>
		</view>


		<view class="details-item">
			<view class="item-title">
				市电电压历史趋势
			</view>
			<view class="item-dot-list u-flex">
				<view class="item-dot" v-for="(item,index) in dot_list_hfwd" :key="index"
					:class="{'active_dot':item.checked === true}" @click="changeDot(item,index,'sddy')">
					{{ item.name }}
				</view>
			</view>
			<view class="de-item-chart">
				<qiun-data-charts type="line" :chartData="chartData_hfwd" background="none"
					:opts="{color: ['#0081FF'], legend: {show: false}, xAxis:{disabled:dot_list_hfwd[hfwd_ind].disabled,fontSize:10},dataLabel:false,yAxis:{unit:'V',fontSize:10}}" />
			</view>
		</view>

		<view class="details-item">
			<view class="item-title">
				市电电流历史趋势
			</view>
			<view class="item-dot-list u-flex">
				<view class="item-dot" v-for="(item,index) in dot_list_hfsd" :key="index"
					:class="{'active_dot':item.checked === true}" @click="changeDot(item,index,'sddl')">
					{{ item.name }}
				</view>
			</view>
			<view class="de-item-chart">
				<qiun-data-charts type="line" :chartData="chartData_hfsd" background="none"
					:opts="{color: ['#0081FF'], legend: {show: false}, xAxis:{disabled:dot_list_hfsd[hfsd_ind].disabled,fontSize:10},dataLabel:false,yAxis:{unit:'A',fontSize:10}}" />
			</view>
		</view>

		<view class="details-item" v-if="status === '紧急' || status === '严重'">
			<view class="item-title">
				历史告警数据
			</view>


			<view class="de-data-list">

				<view class="de-table-title u-flex de-data-border">
					<view class="item-date">
						日期
					</view>
					<view class="item-desc">
						告警描述
					</view>
					<view class="item-isrecovery">
						是否恢复
					</view>
					<view class="item-time">
						恢复时间
					</view>
				</view>
				<view class="de-table-title u-flex table-item-list" v-for="(row,index) in alarmList" :key="index"
					@click="toAlarmDetail(row)">

					<view class="item-date">
						{{ $u.date(row.start * 1000, 'mm-dd') }}
					</view>
					<view class="item-desc item-desc-color u-line-1">
						{{ row.desc }}
					</view>
					<view class="item-isrecovery">
						<text v-if="row.status==1">已恢复</text>
						<text v-if="row.status==0">未恢复</text>
					</view>
					<view class="item-time">
						<text v-if="row.end">{{ $u.date(row.end * 1000, 'mm-dd') }}</text>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		genAlarms
	} from '@/mock/alarm.js'
	import {
		genRtdata
	} from '../../../mock/rtdata.js' // 获取实时数据
	import {
		genHdData
	} from '../../../mock/hdata.js'
	export default {
		data() {
			return {
				name: '',
				mdc: '',
				status: '',
				alarmList: [],
				hfwd_ind: 0,
				hfsd_ind: 0,
				gj_ind: 0,
				config_cs: [{
						name: '市电电压',
						ciid: 'sddy',
						val: 224.2,
						company: 'V',
					},
					{
						name: '市电电流',
						ciid: 'sddl',
						val: 9.1,
						company: 'A',
					},
					{
						name: '频率',
						ciid: 'pl',
						val: 50,
						company: 'Hz',
					},
					{
						name: '视在功率',
						ciid: 'szgl',
						val: 1.6,
						company: 'KVA',
					},
					{
						name: '有限功率',
						ciid: 'yxgl',
						val: 1.6,
						company: 'kW',
					},
					{
						name: '无功功率',
						ciid: 'wggl',
						val: 1.6,
						company: 'kvar',
					},
					{
						name: '通讯状态',
						ciid: '',
						val: '正常',
						company: '',
					},
				],
				config_status: [{
						name: '空调模式',
						val: '制冷',
					},
					{
						name: '通讯状态',
						val: '正常',

					},
				],
				dot_list_hfwd: [{
						name: '近1天',
						checked: true,
						disabled: false,
						start_time: 0,
					},
					{
						name: '近7天',
						checked: false,
						disabled: true,
						start_time: 0,
					}
				],
				dot_list_hfsd: [{
						name: '近1天',
						checked: true,
						disabled: false,
					},
					{
						name: '近7天',
						checked: false,
						disabled: true,
					}
				],
				dot_list_gj: [{
						name: '近7天',
						checked: true,
					},
					{
						name: '近30天',
						checked: false,
					}
				],
				chartData_hfwd: {
					categories: [],
					series: [],
				},
				chartData_hfsd: {
					categories: [],
					series: [],
				},
				chartData_gj: {
					categories: [],
					series: [],
				},

			}
		},
		onLoad(opt) {
			this.name = opt.name || ''
			this.mdc = opt.mdc || ''
			this.status = opt.status || ''
			let date = new Date();
			this.dot_list_hfwd[0].start_time = parseInt(date.getTime() / 1000) - 604800 //近7天
			this.dot_list_hfwd[1].start_time = parseInt(date.getTime() / 1000) - 2592000 //近30天
			this.dot_list_hfsd[0].start_time = parseInt(date.getTime() / 1000) - 604800 //近7天
			this.dot_list_hfsd[1].start_time = parseInt(date.getTime() / 1000) - 2592000 //近30天
			this.dot_list_gj[0].start_time = parseInt(date.getTime() / 1000) - 604800 //近7天
			this.dot_list_gj[1].start_time = parseInt(date.getTime() / 1000) - 2592000 //近30天
			// this.getData()
			this.sevenTrend()
			this.getHistoryDataHfwd(this.dot_list_hfwd[0].start_time)
			this.getHistoryDataHfsd(this.dot_list_hfsd[0].start_time)
			this.getHistoryDataGj(this.dot_list_gj[0].start_time)
			this.getAlarm()
		},
		methods: {
			// 去告警详情
			toAlarmDetail(row) {
				uni.navigateTo({
					url: '../../alarm/detail?id=' + row.id
				})
			},
			// 获取告警
			getAlarm() {
				let list = genAlarms()
				this.alarmList = list.filter(v => v.device.includes(this.name))
				console.log(this.alarmList)
			},
			// 获取历史数据
			getHistoryDataHfwd(time) {
				let date = new Date()
				let start_time = time //默认近7天
				let end_time = parseInt(date.getTime() / 1000)
				let params = {
					ciid: 'sddy',
					start_time: start_time,
					end_time: end_time
				}
				let HistoryData = genHdData(params)
				this.chartData_hfwd.categories = []
				this.chartData_hfwd.series[0].data = []
				HistoryData.map((v, i) => {
					this.chartData_hfwd.categories[i] = this.$u.timeFormat(v.time, 'mm/dd')
					this.chartData_hfwd.series[0].data[i] = v.value
				})
			},
			getHistoryDataHfsd(time) {
				let date = new Date()
				let start_time = time //默认近7天
				let end_time = parseInt(date.getTime() / 1000)
				let params = {
					ciid: 'sddl',
					start_time: start_time,
					end_time: end_time
				}
				let HistoryData = genHdData(params)
				this.chartData_hfsd.categories = []
				this.chartData_hfsd.series[0].data = []
				HistoryData.map((v, i) => {
					this.chartData_hfsd.categories[i] = this.$u.timeFormat(v.time, 'mm/dd')
					this.chartData_hfsd.series[0].data[i] = v.value
				})
			},
			getHistoryDataGj(time) {
				let date = new Date()
				let start_time = time //默认近7天
				let end_time = parseInt(date.getTime() / 1000)
				let params = {
					ciid: 'gj',
					start_time: start_time,
					end_time: end_time
				}
				let HistoryData = genHdData(params)
				this.chartData_gj.categories = []
				this.chartData_gj.series[0].data = []
				HistoryData.map((v, i) => {
					this.chartData_gj.categories[i] = this.$u.timeFormat(v.time, 'mm/dd')
					this.chartData_gj.series[0].data[i] = v.value
				})
			},
			// 切换历史数据
			changeDot(item, ind, type) {
				if (type === 'sddy') {
					this.hfwd_ind = ind
					this.getHistoryDataHfwd(this.dot_list_hfwd[this.hfwd_ind].start_time)
					this.dot_list_hfwd.map((v, i) => {
						if (item.name === v.name) {
							v.checked = true
						} else {
							v.checked = false
						}
					})
				} else if (type === 'sddl') {
					this.hfsd_ind = ind
					this.getHistoryDataHfsd(this.dot_list_hfsd[this.hfsd_ind].start_time)
					this.dot_list_hfsd.map((v, i) => {
						if (item.name === v.name) {
							v.checked = true
						} else {
							v.checked = false
						}
					})
				} else {
					this.gj_ind = ind
					this.getHistoryDataGj(this.dot_list_gj[this.gj_ind].start_time)
					this.dot_list_gj.map((v, i) => {
						if (item.name === v.name) {
							v.checked = true
						} else {
							v.checked = false
						}
					})
				}

			},
			sevenTrend() {
				//市电电压
				this.chartData_hfwd = {
						"categories": [

						],
						"series": [{
							"name": "市电电压",
							"data": [

							]
						}]
					},
					//市电电流
					this.chartData_hfsd = {
						"categories": [

						],
						"series": [{
							"name": "市电电流",
							"data": [

							]
						}]
					},
					//告警趋势
					this.chartData_gj = {
						"categories": [

						],
						"series": [{
							"name": "告警趋势",
							"data": [

							]
						}]
					}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: calc(100% - 64rpx);
		margin: 0 auto;
		padding-bottom: 20rpx;
	}

	.details-top {
		width: 100%;
		padding: 34rpx 0;

		.de-top-icon {
			width: 150rpx;
			text-align: center;

			image {
				width: 110rpx;
			}
		}

		.de-top-con {
			width: calc(100% - 284rpx);

			.de-top-name {
				color: #FFFFFF;
				font-size: 34rpx;
				margin-top: 10rpx;
				font-weight: 500;
			}

			.de-top-status {
				color: #989A9C;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}

		.de-top-active {
			text-align: center;
			color: #989A9C;
			font-size: 24rpx;
			display: flex;
			align-items: center;
		}
	}

	.item-title {
		width: 100%;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.65);
	}

	.details-item {
		background-color: #2A2D32;
		border-radius: 8rpx;
		padding: 30rpx 32rpx;
		margin-bottom: 20rpx;
		width: calc(100% - 64rpx);

		.item-dot-list {
			margin-top: 30rpx;
			margin-bottom: 20rpx;

			.item-dot {
				padding: 5rpx 20rpx;
				margin-right: 20rpx;
				color: #989A9C;
				background-color: #32353A;
				font-size: 26rpx;
				border-radius: 100rpx;
			}

			.active_dot {
				background-color: #253546;
				color: #0081FF;
			}
		}

		.de-item-list {
			margin-top: 30rpx;

			.de-item {
				text-align: center;

				.item-val {
					color: #FFFFFF;
					.tag-unit{
						font-size: 10px;
						padding-left: 3px;
					}
				}

				.item-name {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #989A9C;
				}
			}
		}

		.de-item-chart {
			margin-left: -30rpx;
		}

		.de-data-list {
			width: 100%;
			margin-top: 50rpx;

			.de-data-title {
				color: #8e9093;
				text-align: center;
				margin-top: 50rpx;
				margin-bottom: 30rpx;
			}

			.de-data-border {
				border-bottom: 1px solid #8e9093;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
			}

			.table-item-list {
				padding: 5px 0;
				font-size: 26rpx;
			}

			.de-table-title {
				font-size: 28rpx;
				text-align: left;
				color: #8e9093;

				.item-date {
					width: 100rpx;
				}

				.item-isrecovery {
					width: 180rpx;
				}

				.item-time {
					width: 120rpx;
				}

				.item-desc {
					width: calc(100% - 400rpx);
				}

				.item-desc-color {
					color: #0081FF;
					padding-right: 10rpx;
				}
			}




		}

	}
</style>
